<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>Document</title>
    <script src="./assets/js/jquery-1.11.1.min.js"></script>
    <script src="./assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="css/liMarquee.css">
    <script src="js/jquery.liMarquee.js"></script>
</head>

<body>
    <div class="box">
        <div class="head">
            <div class="logo">
                <span>际海</span>
                <span>智慧殡葬管控平台</span>
            </div>
            <div class="centernav">
                <div class="activenav">
                    <div>首页</div>
                </div>
                <div>
                    <div>
                        运营中心
                    </div>
                </div>
                <div>
                    <div>
                        分析中心
                    </div>
                </div>
                <div>
                    <div>
                        评价中心
                    </div>
                </div>
                <div>
                    <div>
                        监控中心
                    </div>
                </div>
                <div>
                    <div>
                        调度中心
                    </div>
                </div>
            </div>
            <div class="right">
                晴 西北风 7-24℃ / 2023.03.31 /星期五 /11.30.57
            </div>
        </div>
        <div class="nov"></div>
        <div class="content">

            <div class="left">
                <div class="bigtitle">
                    <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                    殡仪馆月度火化总量<span>Total amount of cremation</span>
                </div>
                <div class="number">
                    <img src="./assets/image/1.png" alt="">
                    <div>
                        <div>122</div>
                        <div>共计火化人次</div>
                    </div>
                </div>
                <div class="biao1"> </div>

                <div class="bigtitle">
                    <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                    殡仪馆月度防腐统计<span>Cremation statistics</span>
                </div>
                <div class="biao2"> </div>
                <ul class="ul">
                    <li class="th">
                        <div>区县名称</div>
                        <div>月防腐量</div>
                        <div>月防腐量</div>
                        <div>月防腐量</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                    <li>
                        <div>第一殡仪馆</div>
                        <div>122</div>
                        <div>0</div>
                        <div>0</div>
                    </li>
                </ul>
            </div>
            <div class="center">
                <div class="bigtitle">
                    <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                    当日车辆预约统计<span>Vehicle reservation statistics of the day</span>
                </div>
                <div class="centertop">
                    <div class="center_top_left">
                        <div class="linebox">
                            <div>
                                <div class="linebox_th flex flexcar">
                                    <div>所在区县</div>
                                    <div>接运数量</div>
                                    <div>出车数量</div>
                                </div>
                                <div id="news">
                                    <div class="lincontent carlist" id="car">
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                        <div class="linebox_tr flex flexcar active">
                                            <div>某某县</div>
                                            <div>0</div>
                                            <div>0</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center_top_right">
                        <img src="./assets/image/ditu.png" alt="">
                        <div>
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                            <span>6</span>
                            <span>7</span>
                            <span>8</span>
                            <span>9</span>
                        </div>
                    </div>
                </div>
                <div class="center_bottom">
                    <div class="center_bottom_left">
                        <div class="bigtitle">
                            <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                            近5日出车量统计<span>Traffic volume</span>
                        </div>
                        <div class="biao3"> </div>
                    </div>
                    <div class="center_bottom_right">
                        <div class="bigtitle">
                            <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                            礼厅月度统计<span>Hall statistics</span>
                        </div>
                        <div class="biao4"> </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="bigtitle">
                    <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                    近7日收入统计<span>Income statistics</span>
                </div>
                <div class="biao5"></div>
                <div class="bigtitle">
                    <img class="shaixuan" src="./assets/image/shaixuan.png" alt="">
                    季度收入占比<span>Revenue proportion</span>
                </div>
                <div class="biao6"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    $(document).ready(function () {

        // 初始化
        refreshData()
        // 定时刷新
        setInterval(function () {
            refreshData()
        }, 3000);
        function refreshData() {
            // 当日车辆预约统计 自动滑
            cartnumber()
            //殡仪馆月度火化总量 圆柱图表
            getbiao1()
            //殡仪馆月度防腐统计 环形
            getbiao2()
            //当日车辆预约统计 圆柱图表
            getbiao3()
            //礼厅月度统计 圆柱图表
            getbiao4()
            //近7日收入统计 圆柱图表
            getbiao5()
            //季度收入占比 环形
            getbiao6()
        }
        //殡仪馆月度火化总量 圆柱形图表
        function getbiao1() {
            var myChart = echarts.init(document.querySelector('.biao1'));
            option = {
                xAxis: {
                    type: 'category',
                    axisTick: {
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        },
                    },
                    axisLabel: {
                        color: 'rgb(75, 213, 209)', // 设置字体颜色为蓝色
                    },
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: [{
                    name: '单位：个',
                    type: 'value',
                    splitLine: {
                        show: false // 隐藏纵向线（可选）
                    },
                    barCategoryGap: '50%',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴线的颜色
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        }
                    }
                },
                {
                    type: 'value',
                    splitLine: {
                        show: false, // 隐藏纵向线（可选）
                    },

                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    }
                }],
                legend: {
                    data: ['数据', '趋势'],
                    left: 'right',
                    textStyle: {
                        color: "white"
                    },
                },
                series: [
                    {
                        barWidth: '45%',
                        name: '数据',
                        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(1,174,251)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    },
                    {
                        name: '趋势',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
                        lineStyle: {
                            color: 'rgb(233,168,120)' // 设置线的颜色为红色
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
        }
        //殡仪馆月度防腐统计 环形
        function getbiao2() {
            var myChart = echarts.init(document.querySelector('.biao2'));
            option = {
                graphic: [
                    {
                        //环形图中间添加文字
                        type: "text", //通过不同top值可以设置上下显示
                        left: "center",
                        top: "center",
                        style: {
                            text: `共防腐人次`,
                            textAlign: "center",
                            fill: "rgb(75, 213, 209)", //文字的颜色
                            fontSize: 15,
                            lineHeight: 20,
                        },
                    },
                ],
                series:
                    [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            // center: ['50%', '70%'],
                            // adjust the start and end angle

                            data: [
                                { value: 30, name: '1月' },
                                { value: 20, name: '2月' },
                                { value: 10, name: '3月' },
                                { value: 15, name: '4月' },
                                { value: 80, name: '5月' },
                                { value: 40, name: '6月' },
                            ],
                            label: {
                                normal: {
                                    show: true,//开启提示线文字
                                    color: 'rgb(75, 213, 209)',//文字颜色
                                    formatter: '{c}%, {b} \n\n',
                                    // formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
                                    padding: [0, -10],//取消hr线跟延长线之间的间隙
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 20,//设置最后一行空数据高度，为了能让延长线与hr线对接起来
                                            align: 'center'
                                        },
                                        hr: {//设置hr是为了让中间线能够自适应长度
                                            borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的
                                            width: '105%',
                                            borderWidth: 0.5,
                                            height: 0.5,
                                        },
                                        per: {//用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
                                            padding: [4, 0],
                                        }
                                    }
                                }
                            }
                        }
                    ]
            };
            myChart.setOption(option, true);
        }
        // 当日车辆预约统计
        function cartnumber() {
            $('#car .linebox_tr:first').animate({ 'height': '0', 'opacity': '0' }, 'slow', function () {
                $(this).removeAttr('style').insertAfter('#car .linebox_tr:last');
            });
        }
        // 近5日出车量统计
        function getbiao3() {
            var myChart = echarts.init(document.querySelector('.biao3'));
            option = {
                xAxis: {
                    type: 'category',
                    axisTick: {
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        },
                    },
                    axisLabel: {
                        color: 'rgb(75, 213, 209)', // 设置字体颜色为蓝色
                    },
                    data: ['03:27', '03:28', '03:29', '03:30', '03:31']
                },
                yAxis: [{
                    name: '单位：个',
                    type: 'value',
                    splitLine: {
                        show: false // 隐藏纵向线（可选）
                    },
                    barCategoryGap: '50%',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴线的颜色
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        }
                    }
                }],
                legend: {
                    data: ['数据'],
                    left: 'right',
                    textStyle: {
                        color: "white"
                    },
                },
                series: [
                    {
                        barWidth: '45%',
                        name: '数据',
                        data: [120, 200, 150, 80, 70],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(1,174,251)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    },
                ]
            };
            myChart.setOption(option, true);
        }
        // 礼厅月度统计
        function getbiao4() {
            var myChart = echarts.init(document.querySelector('.biao4'));
            option = {
                xAxis: {
                    type: 'category',
                    axisTick: {
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        },
                    },
                    axisLabel: {
                        color: 'rgb(75, 213, 209)', // 设置字体颜色为蓝色
                    },
                    data: ['一月', '二月', '三月']
                },
                yAxis: [{
                    name: '单位：个',
                    type: 'value',
                    splitLine: {
                        show: false // 隐藏纵向线（可选）
                    },
                    barCategoryGap: '50%',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴线的颜色
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        }
                    }
                }],
                legend: {
                    data: ['守灵', '告别'],
                    left: 'right',
                    textStyle: {
                        color: "white"
                    },
                },
                series: [
                    {
                        barWidth: '20%',
                        name: '守灵',
                        data: [120, 200, 150, 80, 70],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(1,174,251)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    }, {
                        barWidth: '20%',
                        name: '告别',
                        data: [66, 44, 77, 22, 99],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(250,156,96)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    },
                ]
            };
            myChart.setOption(option, true);
        }
        // 近7日收入统计
        function getbiao5() {
            var myChart = echarts.init(document.querySelector('.biao5'));
            option = {
                xAxis: {
                    type: 'category',
                    axisTick: {
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        },
                    },
                    axisLabel: {
                        color: 'rgb(75, 213, 209)', // 设置字体颜色为蓝色
                    },
                    data: ['03:27', '03:28', '03:29', '03:30', '03:31', '03:32', '03:33']
                },
                yAxis: [{
                    name: '单位：万元',
                    type: 'value',
                    splitLine: {
                        show: false // 隐藏纵向线（可选）
                    },
                    barCategoryGap: '50%',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴线的颜色
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'rgb(75, 213, 209)' // 这里设置 y 轴刻度文字的颜色
                        }
                    }
                }],
                legend: {
                    data: ['收入', '惠民'],
                    left: 'right',
                    textStyle: {
                        color: "white"
                    },
                },
                series: [
                    {
                        barWidth: '20%',
                        name: '收入',
                        data: [120, 200, 150, 80, 70, 66, 53],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(1,174,251)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    }, {
                        barWidth: '20%',
                        name: '惠民',
                        data: [66, 44, 77, 22, 99, 92, 50],
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: 'rgb(250,156,96)'
                        },
                        backgroundStyle: {
                            color: 'rgba(10, 43, 71, 0.8)'
                        }
                    },
                ]
            };
            myChart.setOption(option, true);
        }
        // 季度收入占比 环形
        function getbiao6() {
            var myChart = echarts.init(document.querySelector('.biao6'));
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '0%',
                    left: 'right', textStyle: {
                        color: "white"
                    },
                },
                series:
                    [
                        {

                            name: 'Access From',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            // center: ['50%', '70%'],
                            // adjust the start and end angle

                            data: [
                                { value: 30, name: '一季度' },
                                { value: 20, name: '二季度' },
                                { value: 10, name: '三季度' },
                                { value: 15, name: '四季度' },
                            ],
                            label: {
                                normal: {
                                    show: true,//开启提示线文字
                                    color: 'rgb(75, 213, 209)',//文字颜色
                                    formatter: '{b}({c})',
                                    // formatter: '{per|{d}%} , {c|{c}}\n{hr|}\n{a|}',//这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
                                    padding: [0, -10],//取消hr线跟延长线之间的间隙
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 20,//设置最后一行空数据高度，为了能让延长线与hr线对接起来
                                            align: 'center'
                                        },
                                        hr: {//设置hr是为了让中间线能够自适应长度
                                            borderColor: 'auto',//hr的颜色为auto时候会主动显示颜色的
                                            width: '105%',
                                            borderWidth: 0.5,
                                            height: 0.5,
                                        },
                                        per: {//用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
                                            padding: [4, 0],
                                        }
                                    }
                                }
                            }
                        }
                    ]
            };
            myChart.setOption(option, true);
        }

    });

</script>
<style scoped>
    .center_bottom {
        margin-top: 18px;
    }

    .centertop,
    .center_bottom {
        display: flex;
    }

    .center_top_left,
    .center_bottom_left,
    .center_top_right,
    .center_bottom_right {
        flex: 1;
    }

    .center_top_right {
        position: relative;
    }

    .center_top_right>div {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .center_top_right>div span {
        position: absolute;
        color: black;
    }

    .center_top_right>div>span:nth-child(1) {
        left: 128px;
        top: 69px;
        width: 100px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(2) {
        left: 33px;
        top: 149px;
        width: 100px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(3) {
        left: 141px;
        top: 149px;
        width: 100px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(4) {
        left: 115px;
        top: 236px;
        width: 97px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(5) {
        left: 186px;
        top: 228px;
        width: 73px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(6) {
        left: 220px;
        top: 196px;
        width: 73px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(7) {
        left: 269px;
        top: 214px;
        width: 73px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(8) {
        left: 162px;
        top: 298px;
        width: 89px;
        display: block;
        text-align: center;
    }

    .center_top_right>div>span:nth-child(9) {
        left: 254px;
        top: 275px;
        width: 84px;
        display: block;
        text-align: center;
    }

    .center_top_right img {
        display: block;
        width: 100%;
    }

    .flex {
        text-align: center;
    }

    .flexcar>div:last-child {
        flex: 0.5 !important;
    }

    .linebox_tr {
        color: var(--color-word);
        font-size: 0.7vw;
        line-height: 39px;
    }

    .carlist_tr {
        color: var(--color-word);
        font-size: 0.7vw;
        line-height: 39px;
    }

    .active {
        background: var(--color-background2);

    }

    .linebox>div {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 40px;
        box-sizing: border-box;
    }

    .linebox_th {
        font-size: 0.8vw;
        color: var(--color-word);
        line-height: 39px;
        background: var(--color-background2);
        position: absolute;
        top: 0;
        width: 100%;
    }


    .linebox .flex {
        display: flex;
    }

    .linebox .flex>div {
        flex: 1;
    }

    .linebox .flex>div:nth-child(1) {
        flex: 1.1;
        text-align: center;
    }

    .linebox {
        width: 100%;
        top: 40px;
        width: 100%;
        height: 475px;
        bottom: 0px;
        background: var(--color-background);
        border: solid 1px var(--color-border);
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 6px;
    }

    .ul {}

    .ul li {
        color: var(--color-word);
        display: flex;
    }

    .ul li>div {
        flex: 1;
        text-align: center;
        line-height: 34px;
        border-bottom: dashed 1px var(--color-word);
    }

    .ul .th>div {
        color: rgb(96, 140, 185);
    }

    @font-face {
        font-family: Number;
        src: url('./assets/font/Digital-Play-St-3.ttf');
    }

    .biao1 {
        width: 100%;
        height: 300px;
    }

    .biao2 {
        width: 100%;
        height: 250px;
    }

    .biao3 {
        width: 100%;
        height: 450px;
    }

    .biao4 {
        width: 100%;
        height: 450px;
    }

    .biao5 {
        width: 100%;
        height: 450px;
    }

    .biao6 {
        width: 100%;
        height: 450px;
    }

    .number {
        padding: 0 128px;
        margin-top: 18px;
        overflow: hidden;
    }

    .number img {
        width: 100px;
        display: block;
        float: left;
    }

    .number>div {
        width: 153px;
        padding-left: 27px;
        float: left;
    }

    .number>div>div:nth-child(1) {
        color: var(--color-word);
        font-size: 27px;
        padding-top: 10px;
        font-family: Number;
    }

    .number>div>div:nth-child(2) {
        color: var(--color-word);
        font-size: 20px;
    }

    .content .left {
        width: 28%;
        float: left;
        height: 100%;
    }

    .content .center {
        width: 44%;
        float: left;
        height: 100%;
        padding: 0px 20px;
        box-sizing: border-box;
    }

    .content .right {
        width: 28%;
        float: left;
        height: 100%;
    }

    .ceshi {
        font-size: 30px;
        color: white;
    }

    html,
    body {
        width: 100%;
        min-width: 1920px;
    }

    html {
        font-size: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
</style>